import React, { useState, useRef, useEffect } from 'react';

interface ResizablePanelProps {
  left: React.ReactNode;
  right: React.ReactNode;
  initialLeftWidth?: number;
  minLeftWidth?: number;
  maxLeftWidth?: number;
  className?: string;
  style?: React.CSSProperties;
}

const ResizablePanel: React.FC<ResizablePanelProps> = ({
  left,
  right,
  initialLeftWidth = 300,
  minLeftWidth = 200,
  maxLeftWidth = 500,
  className = '',
  style = {},
}) => {
  const [leftWidth, setLeftWidth] = useState(initialLeftWidth);
  const [isDragging, setIsDragging] = useState(false);
  const containerRef = useRef<HTMLDivElement>(null);
  const dragHandleRef = useRef<HTMLDivElement>(null);

  const handleMouseDown = (e: React.MouseEvent) => {
    e.preventDefault();
    setIsDragging(true);
  };

  useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      if (!isDragging || !containerRef.current) return;
      
      const containerRect = containerRef.current.getBoundingClientRect();
      const newLeftWidth = e.clientX - containerRect.left;
      
      // Apply constraints
      const constrainedWidth = Math.max(
        minLeftWidth,
        Math.min(maxLeftWidth, newLeftWidth)
      );
      
      setLeftWidth(constrainedWidth);
    };

    const handleMouseUp = () => {
      setIsDragging(false);
    };

    if (isDragging) {
      document.addEventListener('mousemove', handleMouseMove);
      document.addEventListener('mouseup', handleMouseUp);
    }

    return () => {
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
    };
  }, [isDragging, minLeftWidth, maxLeftWidth]);

  return (
    <div 
      ref={containerRef}
      className={`resizable-container ${isDragging ? 'resizing' : ''} ${className}`}
      style={{ 
        display: 'flex', 
        position: 'relative', 
        width: '100%', 
        height: '100%',
        ...style 
      }}
    >
      <div 
        className="resizable-left"
        style={{ 
          width: leftWidth, 
          minWidth: leftWidth,
          position: 'relative',
          overflow: 'hidden'
        }}
      >
        {left}
      </div>
      
      <div
        ref={dragHandleRef}
        className={`resizable-handle ${isDragging ? 'dragging' : ''}`}
        style={{
          width: '5px',
          cursor: 'col-resize',
          background: isDragging ? '#1677ff' : 'transparent',
          position: 'relative',
          zIndex: 10,
          transition: 'background 0.2s'
        }}
        onMouseDown={handleMouseDown}
      >
        <div 
          style={{
            position: 'absolute',
            top: 0,
            bottom: 0,
            left: -5,
            right: -5,
            cursor: 'col-resize',
          }}
        />
      </div>
      
      <div 
        className="resizable-right"
        style={{ 
          flex: 1,
          overflow: 'hidden'
        }}
      >
        {right}
      </div>
    </div>
  );
};

export default ResizablePanel;